.box1{
    .box2{
        color:red;
    }

    >.box3{
        color:aqua;

        &:hover{
            color:coral;
        }
    }
    //为box1设置一个hover
    //&表示外层父元素
    &:hover{
        color:chartreuse;
    }

    div &{
        width:100px;
    }
}

.p1{
    width:100px;
    height:200px;
}
//extend对当前选择器扩展指定选择器的样式（选择器分组）
.p2:extend(.p1){
    color:red;
}

.p3{
    .p1();//直接对指定样式进行引用，相当于对p1的样式进行复制
          //mixin()混合
}
//使用类选择器时，可以在选择器后面添加一个（），此时就创建了mixins
.p4(){
    width:100px;
    height:100px;
    background-color: deeppink;
}

.p5{
    .p4();//引用
}

.p5{
    .p4;
}
//混合函数,在混合函数中可以直接设置变量
.test(@w,@h){
    width:@w;
    height:@h;
    border:1px solid red;
}
div{
    //调用混合函数必须按顺序传递参数
    // .test(200px,300px);
    .test(@w:200px,@h:300px);
}
span{
    //average计算颜色之间的平均值
    color: average(red,green);
}
html{
    width:100%;
    height:100%;
}

body{
    width:100%;
    height:100%;
    background-color: deepskyblue;
}
body:hover{
    // background-color: deepskyblue;
    background-color: darken(deepskyblue,20%);
}
